
<template>
 <div class="standard pd_40">
   <div>
     <!--<p class="mg_b20"><el-button @click="centerDialogVisible=true,judge='add'" type="primary">新增推荐+</el-button></p>-->
     <el-table
      :data="tableList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="name"
        label="推荐对象名称"
        width="180">
        <template slot-scope="scope">
          <span>{{isGrade(scope.row.pid)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="星级"
        width="180">
      </el-table-column>
      <el-table-column
        width="180"
        align="center"
        label="标示">
        <template slot-scope="scope">
          <img class="icon_img" :src="scope.row.icon" alt="星旅"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="text"
        width="220"
        label="评星标准描述">
      </el-table-column>
      <el-table-column
        prop="updatetime"
        width="200"
        label="上次修正时间">
      </el-table-column>
      <el-table-column
        width="180"
        label="操作">
        <template slot-scope="scope">
        <!--<el-button type="danger" @click="deleteGrade(scope)" size="small">删除</el-button>-->
        <el-button type="primary" @click="edit(scope)" size="small">编辑</el-button>
      </template>
      </el-table-column>
    </el-table>
   </div>
  <div class="block fec mg_t30 mg_40">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

  <!--点击管理alert-->
  <el-dialog
    :title="judge=='add'?'新增推荐标准':'修改推荐标准'"
    :visible.sync="centerDialogVisible"
    width="500px"
    center>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标星名称" prop="name">
            <el-input v-model.trim="form.name"></el-input>
        </el-form-item>
        <el-form-item v-if="judge=='add'?true:false" label="分类版块" prop="pid">
            <el-select v-model="form.pid">
              <el-option v-for="(item,index) in categories" :key="index" :value="item.id" :label="item.name"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="标准描述" prop="text">
            <el-input type="textarea" v-model.trim="form.text"></el-input>
        </el-form-item>
        <el-form-item label="上传标示">
            <el-upload
              name= 'file'
              class="avatar-uploader"
              action="/admin/tool/upLoadToTxOss"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm('form')">取消</el-button>
      <el-button type="primary"  @click="submitForm('form')">确定</el-button>      
    </span>
  </el-dialog>
 </div>
</template>
<script>
export default {
  data() {
    return {
      categories: [],  //分类板块list      
      judge: '',     //判断新增、编辑
      imageUrl: '', //上传表示
      tableList: [], //表格list
      tableData: { page: ''},
      total: null,   //总条数
      index: 1,
      value: '',
      centerDialogVisible: false,

      form: {             //编辑请求参数
          name: '',
          text: '',
          pid: '',
        },
         rules: {
          name: [
            { required: true, message: '请输入标星名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 30 个字符', trigger: 'change' }
          ],
          pid: [
            { required: true, message: '请选择分类', trigger: 'change' },
          ],
          text: [
            { required: true, min: 1, message: '长度在大于1', trigger: 'blur' },
          ]
        },
        
    }
  },
  created() {
    this.getGradeList();
    this.getCategories()
  },
  methods: {
    deleteGrade(scope) {          //删除标准
      let { id } = scope.row;
      let url = '/admin/grade/del';
      let data = { id };
      this.$confirm('是否确定删除该推荐', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(()=> {
        this.$request.get(url,data).then(res=> {
          console.log(res)
          if(res.data.code=='0000') {
            this.$message({
              type: 'success',
              message: '删除成功'
            });
            this.getGradeList()
          }else {
            this.$message.error('删除失败')
          }
        }).catch(err=> {
          console.log(err);
          this.$message.error('出现错误')
        })
      }).catch(()=> {
        this.$message.error('出现错误')
      })
    },
    
    isGrade(pid) {
      if(pid == 1) {
        return '乡村推荐标准'
      }else if(pid == 2) {
        return '乡宿推荐标准'
      }else if(pid == 3) {
        return '乡味推荐标准'
      }
    },
    getGradeList() {         //table列表
      let url = '/admin/grade/query';
      let data = this.tableData;
      this.$request.post(url,data).then(res=> {
        if(res.data.code=="0000") {
        console.log(res)
          
          this.tableList = res.data.data.list;
          this.total = res.data.data.page.total;
        }
      })
    },
    getCategories() {    //获取分类板块       
      let url = '/admin/article/getCategories';
      let data = {};
      this.$request.get(url,data).then(res=> {
        if(res.data.code == '0000') {
          console.log(res.data)
          this.categories = res.data.data
        }
      })
    },
    edit(scope) {      //点击编辑
      this.judge = 'edit';
      this.form.name = scope.row.name;
      this.form.text = scope.row.text;
      this.form.id = scope.row.id;
      this.form.pid = scope.row.pid;
      this.imageUrl = scope.row.icon;
      this.centerDialogVisible = true
    }, 

    handleSizeChange(val) {      //展示条数
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {    //进入第几页
      console.log(`当前页: ${val}`);
      this.tableData.page = val;
      this.getGradeList()

    },

    handleAvatarSuccess(res, file) {   
      console.log(res,file) 
      this.imageUrl = res.data[0];
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/bmp';
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error('上传图片只能是格式不正确!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return isJPG && isLt2M;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.imageUrl) {
              if(this.judge=='edit') {
                let url = '/admin/grade/edit';
                let icon = this.imageUrl;
                let data = { ...this.form, icon, }
                this.$request.post(url,data).then(res=> {
                    console.log(res.data)
                  if(res.data.code=='0000') {
                    this.$message({
                      message: '修改成功',
                      type: 'success'
                    })
                    this.form.name = '';
                    this.form.text = '';
                    this.form.pid = '';
                    this.getGradeList();

                  }else {
                      this.$message.error('操作失败')
                  }
                }).catch(err=> {
                  console.log(err)
                  this.$message.error('服务器错误')
                })
                this.centerDialogVisible = false;
              }else {
                let url = '/admin/grade/add';
                let icon = this.imageUrl;
                let data = { ...this.form, icon, };
                this.$request.post(url,data).then(res=> {
                  console.log(res.data.code)
                  if(res.data.code=='0000') {
                    this.$message({
                      type: 'success',
                      message: '新增成功'
                    })
                    this.centerDialogVisible = false;
                    this.getGradeList();
                  }else {
                    this.$message.error('新增失败')
                  }
                  
                }).catch(err=> {
                  console.log(err);
                  this.$message.error('出现错误')
                })
              }
            }else {
              this.$message.error('请选择图片')
            }
            
          } else {
          console.log('error submit!!');
          return false;
          }
      });
    },
    resetForm(formName) {
        this.centerDialogVisible = false;
        console.log(this.$refs[formName].resetFields(),formName)
        this.$refs[formName].resetFields();
    }
  },
  
}
</script>
<style scoped lang="less">
  .icon_img {
    width: 40px;
    height: 60px;
  }
   
</style>
<style>
  .standard .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .standard .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .standard .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .standard .avatar {
    width: 60px;
    height: 60px;
    display: block;
  }
</style>


